<template>
  <view class="invoice-container">
    <div class="form-box">
      <u-form :model="form" :rules="rules" ref="uForm" label-width="240rpx">
        <u-form-item label="反馈内容" prop="content"><u-input v-model="form.content" type="textarea"/></u-form-item>
        <u-form-item label="联系人" prop="nickname"><u-input v-model="form.nickname" /></u-form-item>
        <u-form-item label="联系电话" prop="phone"><u-input v-model="form.phone" max="11" type="number" /></u-form-item>
      </u-form>
    </div>
    <button class="add-btn" style="margin: 20rpx 0" @click="submit">提交</button>
  </view>
</template>

<script>
import { mapGetters } from 'vuex';
export default {
  data() {
    return {
      form: {
        content: '',
        nickname: '',
        phone: ''
      },
      rules: {
        content: [
          { required: true, message: '请输入反馈内容', trigger: 'blur' }
        ],
        nickname: [
          { required: true, message: '请输入联系人', trigger: 'blur' }
        ],
        phone: [
          { required: true, message: '请输入联系电话', trigger: 'blur' }
        ]
      }
    }
  },
  computed: {
    ...mapGetters(['userInfo'])
  },
  // 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
  onReady() {
    this.$refs.uForm.setRules(this.rules);
  },
  methods: {
    submit() {
      if (!this.$store.state.userInfo.id) {
        uni.showToast({
          title: '请先登录',
          icon: 'none'
        });
        return;
      }
      this.$refs.uForm.validate(valid => {
        if (valid) {
          console.log('验证通过');
          this.$api.feedbackCreate({
            ...this.form,
            user_id: this.userInfo.id,
            nickname: this.userInfo.nickname
          }).then(res => {
            uni.showToast({
              title: '提交成功',
              icon: 'success'
            });
            setTimeout(() => {
              uni.navigateBack();
            }, 1000);
          });
        } else {
          console.log('验证失败');
        }
      });
    }
  }
}
</script>

<style lang="scss">
.invoice-container {
  padding: 20rpx;
  height: 100%;
  background-color: #f5f5f5;
  .form-box {
    padding: 20rpx 40rpx;
    background-color: #fff;
    border-radius: 20rpx;
  }
}
</style>
